<template>
	<view class="container">
		<view class="title">欢迎来到车辆综合服务平台商家端</view>
		<view class="input-wrapper">
			<input type="number" placeholder="输入手机号" v-model="phoneNumber" />
		</view>
		<view class="input-wrapper code">
			<input type="number" placeholder="输入手机验证码" v-model="verificationCode" />
			<button id="getCodeBtn" @click="getVerificationCode">获取验证码</button>
		</view>
		<view class="register-link" @click="toRegister">立即注册</view>
		<button class="login-button" @click="login">登录</button>
	</view>
</template>

<script setup>
	// import {
	// 	ref
	// } from 'vue';

	// const phoneNumber = ref('');
	// const verificationCode = ref('');



	const toRegister = () => {

		console.log('跳转到注册页面');
		uni.navigateTo({
			url: '/pages/register/register'
		})
	};

	const login = () => {
		console.log('执行登录逻辑');
		uni.navigateTo({
			url: '/pages/index/index'
		})
	};

	function getVerificationCode() {
		// 简单验证手机号是否为空
		if (phoneNumber.value === '') {
			alert('手机号不能为空');
			return;
		}
		// 这里可以添加实际的获取验证码的逻辑，例如发送 AJAX 请求到后端
		console.log(`正在为手机号 ${phoneNumber} 获取验证码...`);
		// 模拟获取验证码成功
		alert('验证码已发送，请查收');
	}
</script>

<style scoped>
	.container {
		padding: 0 20rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: 700;
		margin: 20rpx 10rpx;
		margin-bottom: 40rpx;
	}

	.input-wrapper {
		margin-bottom: 40rpx;
		margin-right: 20rpx;

	}

	.input-wrapper input {
		width: 100%;
		height: 80rpx;
		border-bottom: 2rpx solid #ccc;
		box-sizing: border-box;
		border-radius: 5rpx;
		padding: 0 10rpx;
		color: #999;
	}



	.input-wrapper button {
		height: 40rpx;
		border: none;
		border-radius: 5rpx;
		background-color: #fff;
		color: #007AFF;
		padding: 0 15rpx;
	}

	.code {
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		border-bottom: 2rpx solid #ccc;
		box-sizing: border-box;
	}

	.code input {
		border: none;
		margin-bottom: 6rpx;
	}

	#getCodeBtn {
		width: 200rpx;
		height: 60rpx;
		border: none;
		border-radius: 5rpx;
		background-color: #55aaff;
		color: #fff;
		font-size: 20rpx;
		margin-bottom: 26rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.register-link {
		color: #007AFF;
		text-align: left;
		margin-bottom: 30rpx;
		font-size: 30rpx;
	}

	.login-button {
		width: 94%;
		height: 90rpx;
		border: none;
		margin: 80rpx auto;
		border-radius: 10rpx;
		background-color: #007AFF;
		color: #fff;
		font-size: 32rpx;

	}
</style>